<template>
  <view class="page" v-if="info">
    <view class="refound-bill">
      <view class="refound-bill-col ptb-20" style="padding-top: 54rpx">
        <text>账单总额（元）</text>
        <text>￥{{ info.billMoney }}</text>
      </view>
      <view class="line"></view>
      <view class="ptb-20">
        <view class="grid-3">
          <view class="grid-col">
            <view>实收金额</view>
            <view>￥{{ info.actualAmount || 0 }}</view>
          </view>
          <view class="grid-col">
            <view>实收违约金</view>
            <view>￥{{ info.actualFine || 0 }}</view>
          </view>
          <view class="grid-col">
            <view>欠缴</view>
            <view>￥{{ needPay }}</view>
          </view>
        </view>
      </view>
      <view class="line" style="margin-bottom: 20rpx;"></view>
      <view class="refound-bill-col">
        <view>账单编号</view>
        <view>{{ info.billNum }}</view>
      </view>
      <view class="refound-bill-col">
        <view>企业名称</view>
        <view>{{ info.enterpriseName }}</view>
      </view>
<!--      <view class="refound-bill-col">-->
<!--        <view>退租详情</view>-->
<!--        <view style="color:#44D94B " @click="goLeaseInfo">-->
<!--          查看详情-->
<!--          <u-icon name="arrow-right" color="#44D94B" style="margin-left: 6rpx;" size="10"></u-icon>-->
<!--        </view>-->
<!--      </view>-->
      <view class="refound-bill-col">
        <view>账单状态</view>
        <view :style="{color:refundState=='已缴费'?'#44D94B':'#F74D39'}">{{ refundState }}</view>
      </view>


    </view>

    <view style="margin: 20rpx 32rpx;color:#666">账单说明</view>

    <view class="show-panel">
      <textarea style="padding-top: 20rpx;" v-model="info.remark" disabled></textarea>
    </view>
    <view class="xb-bottom-btn" v-if="info.billState=='0'||''" @click="okNoticeFn">
      {{ bottomTxt }}
    </view>
    <view
        v-else-if="info.billState=='1'"
        class="btn-bt-box"
    >
      <view @click="showAddBill=true">添加缴费记录</view>
      <view style="background: #17C25A" @click="stopBill">结束账单</view>
    </view>

    <u-popup v-model="showAddBill" mode="center" width="80%" closeable border-radius="20" title="ss">
      <view class="pop-box" >
        <view class="pop-box-top" style="position: relative">
          <view class="pop-box-tit">添加缴费</view>
        </view>

        <view class="show-panel" style="margin-top: 20rpx">
          <view class="show-col">
            <text class="show-col-l">收费金额</text>
            <view class="show-col-r">
              <input v-model="sfBillForm.receiptAmount" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

        </view>
        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">违约金</text>
            <view class="show-col-r">
              <input v-model="sfBillForm.receiptTotalFine" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

        </view>

        <view class="okbtn" hover-class="button-hover" @click="addBillAccount" style="position:relative;">
          确认
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "reFundBillInfo",
  data() {
    return {
      sfBillForm: {
        "billId": "",
        "billNum": "",
        "billType": "",
        receiptAmount: 0,
        receiptTotalFine:0
      },
      showAddBill: false,
      refundId: null,
      info: null
    }
  },
  computed: {
    refundState() {
      switch (this.info.billState) {
        case "0":
          return '待确认'
        case "1":
          return '欠缴中'
        case "2":
          return '已结束'
      }
    },
    needPay() {
      let num=parseFloat(this.info.billMoney) - (parseFloat(this.info.actualAmount || 0) + parseFloat(this.info.actualFine || 0))
      return num<0?'0':num
    },
    bottomTxt() {
      switch (this.info.billState) {
        case "0":
          return '确认并通知企业'
        case "1":
          return '欠缴中'
        case "2":
          return '已结束'
      }
    }
  },
  onLoad({id}) {
    this.refundId = id
    this.getInfo()
  },
  methods: {
    resetBillForm() {
      this.sfBillForm = {
        "billId": "",
        "billNum": "",
        "billType": "",
        receiptAmount: 0,
        receiptTotalFine:0
      }
    },
    getInfo() {
      this.apis.businessApi.feApartmentCancelBillInfo(this.refundId).then(res => {
        this.info = res.data
        this.info.billType = "公寓退租账单"
      })
    },
    okNoticeFn() {
      this.info.billState = '1'
      this.apis.businessApi.cancelBillNotice(this.info).then(res => {
        if (res.code == 200) {
          this.getInfo()
          this.showToast('确认成功，等待企业缴费！')
        }
      })
    },
    editReFund() {
      this.apis.businessApi.editApartmentCancelBill(this.info).then(res => {

      })
    },
    stopBill() {
      let reqForm = this.$u.deepClone(this.info)
      reqForm.info.billState = '2'
      this.apis.businessApi.editApartmentCancelBill(reqForm).then(res => {
        if (res.code == 200) {
          this.showToast('结束成功')
          this.getInfo()
        } else {
          this.showToast(res.msg)
        }
      })
    },
    addBillAccount() {
      this.sfBillForm.billId=this.info.id
      this.sfBillForm.billNum=this.info.billNum
      this.sfBillForm.billType='公寓退租账单'
      this.apis.lifeApi.addReceiptDetail(this.sfBillForm).then(res => {
        if (res.code==200){
          this.showToast('录入成功')
          this.showAddBill=false
          this.resetBillForm()
          this.getInfo()
        }else {
          this.showToast(res.msg)
        }
      })
    },
    goLeaseInfo(){
      this.navTo("/pagesBuilding/leases/refundInfo?id="+this.info.cancelId)
    }
  }
}
</script>

<style scoped lang="scss">
.refound-bill {
  position: relative;
  padding: 0rpx 32rpx 20rpx;
  border-radius: 12rpx;
  width: 100%;
  background: #fff;

  &:after {
    content: "";
    position: absolute;
    top: 116rpx;
    right: 0;
    width: 30rpx;
    background: #F8F8F8;
    height: 30rpx;
    border-radius: 50%;
    transform: translateX(50%);
  }

  &:before {
    content: "";
    position: absolute;
    top: 116rpx;
    left: 0;
    width: 30rpx;
    background: #F8F8F8;
    height: 30rpx;
    border-radius: 50%;
    transform: translateX(-50%);
  }

  .refound-bill-col {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #EEEEEE;
    transform: scaleY(0.5);
  }

  .ptb-20 {
    padding: 40rpx 0;
  }

  .grid-3 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    .grid-col {
      width: 100%;
      display: flex;
      flex-direction: column;

      view:nth-child(1) {
        font-size: 26rpx;
        font-weight: 500;
        color: #999999;
        line-height: 30rpx;
        margin-bottom: 8rpx;
      }

      view:nth-child(2) {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        line-height: 30rpx;
      }
    }
    .grid-col:nth-child(2){
      text-align: center;
    }


    .grid-col:last-child {
      display: flex;
      align-items: flex-end;
    }
  }
}
.okbtn{
  width: 100%;
  height: 104rpx;
  background: #44D94B;
  font-size: 34rpx;
  color: #FFFFFF;
  @include flexCenter;
}
.btn-bt-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 104rpx;
  background: #44D94B;
  font-size: 34rpx;
  z-index: 99;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  @include flexCenter;

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateY(100%);
  }

  view {
    flex: 1;
    height: 100%;
    @include flexCenter;
  }
}

.pop-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;

  .pop-box-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 2;

    .pop-box-tit {
      width: 100%;
      height: 100rpx;
      background: #fff;
      @include flexCenter;
    }
  }

  .pop-box-c {
    width: 100%;
    flex: 1;
    padding-top: 124rpx;

    .leasepop-scroll {
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      padding-bottom: 160rpx;
    }
  }

}
</style>
